<template>
    <div class="makerList">
        <div class="makerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">待审核精英<i class="el-icon-close"></i></div>
		</div>
        <div class="makerList_bottom">
            <div class="new">
                <div class="shopList">
                    <div class="shopList_serch">
                        <div class="shopList_serch_ipt">
							<el-input v-model="input" placeholder="请输入商品信息查询"></el-input>
							<button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
                    </div>
                </div>
            </div>
            
            <div class="makerList_table">
                <div class="makerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>申请时间</th>
							<th>姓名</th>
							<th>手机号</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{$moment(v.create_time*1000).format('YYYY-MM-DD HH:mm')}}</td>
							<td>{{v.realname}}</td>
							<td>{{v.mobile}}</td>
							<td>
								<button class="editor" @click="toPass(v.id)">通过</button>
								<button class="shelves" @click="toNot(v.id)">拒绝</button>
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="12">当前数据空空如也</td></tr>
					</table>
				</div>
				<div class="makerList_bottom_page">
				<div class="makerList_bottom_page_left">
					<div class="makerList_bottom_page_left_checkAll" @click="handerCheckAll">
						<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
					</div>全选
					<button class="makerList_bottom_page_left_btn" @click="selectPass">通过</button>
					<button class="makerList_bottom_page_left_btn" @click="selectNot">拒绝</button>
					</div>
					<div class="makerList_bottom_page_right">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="page"
							:page-sizes="[10, 20, 30, 40]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total"
							background>
						</el-pagination>
					</div>
				</div>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@/api/index.js'
export default {
    data(){
        return{
            tableList:[],
            input:'',
			checkAll:false,
			page:1,
			pageSize:10,
			total:0,
            checkBoxAll:[],				// 选中的数据
			shelvesAlls:[],
        }
    },
	mounted(){
		this.getMakerExamine()
	},
    methods: {
		// 获取审核列表
		getMakerExamine(){
			api.makerExamineList({page:this.page,pagesize:this.pageSize}).then(res=>{
				console.log(res);
				if(res.code==1){
					this.tableList = res.data.list?res.data.list:[]
				}
			})
		},

		// 通过或拒绝
		passORnot(ids,status){
			api.toOperMaker({ids,status}).then(res=>{
				if(res.code==1){
					this.getMakerExamine()
					this.$message.success(status==1?'已同意申请':'已拒绝申请')
				}else{
					this.$message.warning(res.msg)
				}
			})
		},
		// 点击通过
		toPass(id){
			this.$confirm('是否确定同意当前申请?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(()=>{
				this.passORnot(id,1)
			})
		},

		// 点击拒绝
		toNot(id){
			this.$confirm('是否确定拒绝当前申请?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(()=>{
				this.passORnot(id,0)
			})
		},

         
         // 多选
		handlerCheckbox(i){
               console.log(i);
			let arr = this.checkBoxAll;
			if(arr.includes(i)){
				let index = arr.indexOf(i);
				if(index != -1){
					arr.splice(index,1);
					this.shelvesAlls.splice(index,1);
					if(this.checkBoxAll.length !== this.tableList.length) {
						this.checkAll = false;
					}
				}
			}else {
				this.checkBoxAll.push(i);
				this.shelvesAlls.push(this.tableList[i].id);
				if(this.checkBoxAll.length == this.tableList.length) {
					this.checkAll = true;
				}
			};
			console.log(this.shelvesAlls);
		},
           // 全选与全不选
		handerCheckAll(){
			this.checkAll = !this.checkAll;
			let arr = this.tableList.length;
			this.checkBoxAll = [];
			this.shelvesAlls = [];
			if(this.checkAll){
				for(let i=0;i<arr;i++){
					this.checkBoxAll.push(i);
				}
				this.checkBoxAll.map(v => {
				this.shelvesAlls.push(this.tableList[v].id.toString());;
			})
			}else {
				this.checkBoxAll = [];
				this.shelvesAlls = []
			}
			console.log(this.shelvesAlls);
		},

		// 全选后的同意
		selectPass(){
			console.log(this.shelvesAlls);
			let res =[...new Set(this.shelvesAlls)]; //去重
			let str = res.join(',');
			if(str){
				this.$confirm('是否确定同意所选项申请?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(()=>{
					this.passORnot(str,1)
				})
			}else{
				this.$message.warning('请选择要同意项')
			}
		},

		// 全选后的拒绝
		selectNot(){
			console.log(this.shelvesAlls);
			let res =[...new Set(this.shelvesAlls)]; //去重
			let str = res.join(',');
			if(str){
				this.$confirm('是否确定拒绝所选项申请?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(()=>{
					this.passORnot(str,0)
				})
			}else{
				this.$message.warning('请选择要拒绝项')
			}
		},

        // 搜索
        handerSeach(){},

        //分页
			handleSizeChange(val) {
				this.pageSize = val;
				console.log(val);
				this.getMakerExamine()
			},
			handleCurrentChange(val) {
			    this.page = val;
				console.log(val);
				this.getMakerExamine()
			},
    },
}
</script>

<style lang="less" scoped>
    @import 'makerExamine.less';
</style>